<template>
  <div class="photo-box">
    <el-image
      style="width: 180px; height: 180px; margin: 8px"
      :src="snapPhotos.path"
      fit="scale-down"
      :lazy="true"
      :preview-src-list="[snapPhotos.path]"
    ></el-image>
    <p class="photo-box__name">
      {{ snapPhotos.zoneName }}
    </p>
    <p class="photo-box__date">{{ TimestampToDate(snapPhotos.createTime) }}</p>
  </div>
</template>

<script>
export default {
  props: {
    snapPhotos: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  mounted() {},
  methods:{
    TimestampToDate(Timestamp) {
      Timestamp = parseInt(Timestamp)
      if (isNaN(Timestamp)) return '未知时间'
      let date1 = new Date(Timestamp* 1000);
      return date1.toLocaleDateString().replace(/\//g, "-") + " " + date1.toTimeString().substr(0, 8);
    }
  }
};
</script>

<style lang="scss" scoped>
.photo-box {
  width: 100%;
  height: 100%;
  background-image: url("../assets/biankuang@2x.png");
  background-size: 100% 100%;
  p {
    margin: 6px 0;
    padding: 0 8px;
  }
  &__name {
    box-sizing: border-box;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__date {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
  }
}
</style>